<template>
    <div class="pending">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="订单编号" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="配送地址" prop="region">
                <el-input v-model="ruleForm.region"></el-input>
            </el-form-item>
            <el-form-item label="下订时间" required>
                <el-col :span="11">
                    <el-form-item prop="date1">
                        <el-date-picker type="date" placeholder="今天日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="1">-</el-col>
                <el-col :span="11">
                    <el-form-item prop="date2">
                        <el-time-picker placeholder="现在时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="即时配送" prop="delivery">
                <el-switch  v-model="ruleForm.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="备注" prop="desc">
                <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    data() {
        return {
            ruleForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                desc: ''

            },
            // 通过 rules 属性传入约定的验证规则
            rules: {
                name: [
                    { required: true, message: '请输入订单编号', trigger: 'blur'},
                    { max : 15, message: '编号15位数', trigger: 'blur'}
                ],
                region: [
                    { required: true, message: '配送地址', trigger: 'change' }
                ],
                date1: [
                    { type: 'date', required: true, message: '今天日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'date', required: true, message: '现在时间', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '备注', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if(valid) {
                    alert('下单成功!');
                    this.ruleForm = {};
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(forName) {
            this.$refs[formName].resetFields();
        }
    },
}
</script>
<style>
    
</style>